<%@ page import="com.example.domain.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>校园论坛系统-用户首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet"> <!-- 自定义样式 -->
    <script src="js/jquery-3.5.1/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/user.js"></script>
</head>

<body>
<%
    Users user = (Users) session.getAttribute("user");
    String avatarUrl = "/img/avatar.jpg";
    String userId = "";
    if (user == null) {
        userId = "1"; // 如果会话中的用户ID为空，设置默认值为 "1"
    } else {
        avatarUrl  = user.getAvatarUrl();
        userId = String.valueOf(user.getId());
    }
%>
<nav class="navbar navbar-inverse"> <!-- 修改背景色 -->
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">校园论坛系统</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#" id="forumIndex">论坛首页</a></li>
        </ul>
        <div class="navbar-form navbar-left" role="search">
            <div class="input-group">
                <input type="text" id="searchLabel" name="title" value="" class="form-control" placeholder="您想搜索的内容" required="">
                <span class="input-group-btn">
            <button type="submit" class="btn btn-primary" id="search">搜索</button>
        </span>
            </div>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <img src="<%= avatarUrl %>" class="nav-avatar" alt="Avatar" id="headAvatarUrl">
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#" id="personalCenterLink"><span class="glyphicon glyphicon-user"></span> 个人中心</a></li> <!-- 个人中心链接 -->
                    <li><a href="/login.jsp"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li> <!-- 退出系统链接 -->
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div id="container" class="container">
    <div class="row">
        <!-- 左边显示所有分类 -->
        <div class="col-md-1 margin">
            <div class="p-3 bg-light">
                <h4>所有分类</h4>
                <ul id="categoryList" class="list-group">
                    <!-- 分类列表 -->
                </ul>
            </div>
        </div>
        <!-- 中间显示帖子内容 -->
        <div class="col-md-6 margin">
            <div class="p-3 bg-light">
                <ul id="postList" class="list-group" style="margin-top: 40px;">
                    <!-- 帖子列表 -->
                </ul>
            </div>
        </div>
        <!-- 右边显示发帖的输入框等 -->
        <div class="col-md-3 margin">
            <div class="p-3 bg-light">
                <form id="postForm" style="margin-top: 40px">
                    <div class="form-group">
                        <label for="postTitle">标题</label>
                        <input type="text" class="form-control" id="postTitle" placeholder="输入标题">
                    </div>
                    <div class="form-group">
                        <label for="postCategory">分类</label>
                        <select class="form-control" id="postCategory">
                            <!-- 这里是动态生成的分类选项 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="postContent">内容</label>
                        <textarea class="form-control" id="postContent" rows="3" placeholder="输入内容"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="sendPost">发帖</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 个人中心模态框 -->
<div class="modal fade" id="personalCenterModal" tabindex="-1" aria-labelledby="personalCenterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="personalCenterModalLabel">用户信息</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12 text-center mb-3">
                        <img id="avatarUrl" alt="用户头像" class="img-thumbnail" style="width: 150px; height: 150px; cursor: pointer;">
                        <input type="file" id="avatarFile" class="form-control mt-3" accept="image/*" style="display: none;">
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">用户ID</label>
                            <input type="text" class="form-control" id="userId" readonly>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">登录名</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">昵称</label>
                            <input type="text" class="form-control" id="nickname">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">个性签名</label>
                            <input type="text" class="form-control" id="bio">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3" style="margin-top: 20px">
                            <label class="form-label">性别</label>
                            <select class="form-select" style="margin-left: 40px" id="gender">
                                <option value="0">男性</option>
                                <option value="1">女性</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">电话号码</label>
                            <input type="text" class="form-control" id="phone">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">电子邮件地址</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="cancelModal" href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
                    取消
                </a>
                <button type="button" class="btn btn-primary ms-auto" id="updateUserInfo">
                    更新用户信息
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {


        // 头像点击触发文件输入框
        $('#avatarUrl').on('click', function() {
            $('#avatarFile').click();
        });

        // 当文件选择后，预览新的头像
        $('#avatarFile').on('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#avatarUrl').attr('src', e.target.result);
                    $('#headAvatarUrl').attr('src', e.target.result)
                }
                reader.readAsDataURL(file);
                updateUser()
            }
        });

        //获取userId
        var userId = '<%= userId %>';
        // 初始加载所有分类
        $.ajax({
            url: 'categoryServlet',
            method: 'GET',
            success: function (data) {
                var categories = data.data;
                var categoryList = $('#categoryList');
                var categorySelect = $('#postCategory');
                categoryList.empty();
                $.each(categories, function (index, category) {
                    var option = $('<option></option>').attr('value', category.id).text(category.name);
                    categorySelect.append(option);
                    // 创建<a>标签，并添加事件监听器
                    var link = $('<a>')
                        .text(category.name)
                        .attr('href', '#')
                        .addClass('list-group-item')
                        .mouseover(function () {
                            $(this).css('background-color', 'lightgray'); // 鼠标经过时的样式
                        })
                        .mouseout(function () {
                            $(this).css('background-color', 'white'); // 鼠标移出时的样式
                        })
                        .click(function () {
                            // 点击时触发查询操作
                            var categoryId = category.id; // 获取分类ID
                          // 获取用户ID
                            if (categoryId && userId) {
                                // 发起查询操作
                                loadPostsByCategory(categoryId, userId, 1, 1, 1000, '');
                            } else {
                                alert('无法获取分类或用户信息');
                            }
                        });
                    categoryList.append(link);
                });
            },
            error: function () {
                alert('加载分类失败');
            }
        })

        //加载所有帖子内容
        loadPostsByCategory(0, userId,0,1,1000,'')

        // 监听搜索按钮点击事件
        $('#search').click(function(event) {
            event.preventDefault(); // 防止表单提交
            var searchValue = $('#searchLabel').val(); // 获取搜索框中的内容
            loadPostsByCategory(0,userId,3,1,1000, searchValue);
        });
        //刷新
        $('#forumIndex').click(function() {
            location.reload();
        });

        //发送帖子事件
        $('#sendPost').click(function() {
            // 调用名为 sendPost 的函数
            var categoryId = $('#postCategory').val();
            sendPost(userId,categoryId);
        });

        //个人信息展示
        $('#personalCenterLink').click(function(e) {
            e.preventDefault();
            $('#personalCenterModal').modal('show');
            console.log(userId)
            selectUser(userId);
        });

        //更新用户

        $('#updateUserInfo').click(function() {
            var updatedUserInfo = {
                id: $('#userId').val(),
                username: $('#username').val(),
                nickname: $('#nickname').val(),
                bio: $('#bio').val(),
                gender: $('#gender').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                password: $('#password').val(),
                avatarUrl: $('#avatarUrl').attr('src')
            };
            sendUpdateRequest(updatedUserInfo)
        });

        //取消模态框
        $("#cancelModal").click(function () {
            $('#personalCenterModal').modal('hide');
        })
    });
</script>
</body>
</html>
